.frame{
width: 320px;
height: 495px;
position: absolute;
left: 333px;
top: 10px;
overflow: hidden;
}
.item{
width: 320px;
float: left;
height: 495px;
position: relative;
}
#move{
position: relative;
}
.skin{
top: 188px;
left: 33px;
cursor: pointer;
position: absolute;
}
.skin_left1{
top: 188px;
left: 100px;
}
.skin_left2{
top: 188px;
left: 170px;
}
.skin_left3{
top: 188px;
left: 238px;
}
.cheek{
top: 278px;
left: 33px;
cursor: pointer;
position: absolute;
}
.cheek_left1{
top: 278px;
left: 100px;
}
.cheek_left2{
top: 278px;
left: 170px;
}
.cheek_left3{
top: 278px;
left: 240px;
}
.eyeliner{
top: 410px;
left: 42px;
cursor: pointer;
position: absolute;
}

.eyeliner_left1{
top: 410px;
left: 110px;
}
.eyeliner_left2{
top: 410px;
left: 178px;
}
.eyeliner_left3{
top: 410px;
left: 245px;
}
.eyeliner_left4{
top: 442px;
left: 73px;
}
.eyeliner_left5{
top: 442px;
left: 140px;
}
.eyeliner_left6{
top: 442px;
left: 208px;
}
.clear{
clear: both;
}
.eyebrow{
top: 140px;
left: 35px;
cursor: pointer;
display: block;
position: absolute;
}
.i_eyebrow{
float: left;
}
.eyebrow1{
top: 158px;
left: 35px;
}
.eyebrow2{
top: 175px;
left: 41px;
}
.eyebrow3{
top: 193px;
left: 39px;
}
.eyebrow4{
top: 215px;
left: 38px;
}
.eyelash{
top: 118px;
left: 175px;
cursor: pointer;
display: block;
position: absolute;
}

.eyelash1{
top: 140px;
left: 171px;
}
.eyelash2{
top: 162px;
left: 181px;
}
.eyelash3{
top: 211px;
left: 181px;
}
.eyelash4{
top: 184px;
left: 179px;
}
.eyecolor{
top: 270px;
left: 30px;
cursor: pointer;
position: absolute;
}
.eyecolor1{
top: 270px;
left: 139px;
}
.eyecolor2{
top: 270px;
left: 243px;
}
.eyecolor3{
top: 308px;
left: 30px;
}
.eyecolor4{
top: 308px;
left: 138px;
}
.eyecolor5{
top: 308px;
left: 242px;
}
.eyecolor6{
top: 340px;
left: 84px;
}
.eyecolor7{
top: 340px;
left: 187px;
}
.lip{
top: 395px;
left: 30px;
cursor: pointer;
position: absolute;
}
.lip1{
left: 80px;	
top: 395px;
}
.lip2{
left: 130px;	
top: 395px;
}
.lip3{
left: 182px;	
top: 395px;
}
.lip4{
left: 234px;	
top: 395px;
}
.lip5{
left: 284px;	
top: 395px;
}
.dress{
top: 145px;
left: 100px;
cursor: pointer;
position: absolute;
}
.dress1{
top: 270px;
left: 25px;
}
.dress2{
top: 264px;
left: 195px;
}
.dress3{
top: 390px;
left: 25px;
}
.dress4{
top: 380px;
left: 175px;
}
.hair{
cursor: pointer;
top: 133px;
left: 20px;
position: absolute;
}
.hair1{
top: 191px;
left: 20px;
}
.hair2{
top: 135px;
left: 85px;
}
.hair3{
top: 135px;
left: 170px;
}
.hair4{
top: 139px;
left: 235px;
}
.lines{
cursor: pointer;
top: 306px;
left: 20px;
position: absolute;
}
.lines1{
top: 280px;
left: 87px;
}
.lines2{
top: 299px;
left: 146px;
}
.lines3{
top: 296px;
left: 225px;
}
.lines4{
top: 340px;
left: 235px;
}
.earring{
cursor: pointer;
top: 409px;
left: 236px;
position: absolute;
}
.earring1{
top: 426px;
left: 20px;
}
.earring2{
top: 429px;
left: 84px;
}
.earring3{
top: 420px;
left: 153px;
}
.earring4{
top: 436px;
left: 237px;
}
.hat{
cursor: pointer;
top: 172px;
left: 18px;
position: absolute;
}
.hat1{
left: 106px;
    top: 177px;
}
.hat2{
left: 212px;
    top: 247px;
}
.hat3{
left: 8px;
    top: 255px;
}
.hat4{
left: 115px;
    top: 241px;
}
.hat5{
left: 45px;
    top: 307px;
}
.hat6{
left: 167px;
    top: 171px;
}
.hat7{
left: 237px;
    top: 163px;
}
.hat8{
left: 131px;
    top: 310px;
}
.hat9{
left: 230px;
    top: 299px;
}
.hat10{
left: 20px;
    top: 408px;
}
.hat11{
left: 128px;
    top: 405px;
}
.hat12{
left: 216px;
    top: 400px;
}
.next{
position: absolute;
bottom: 0px;
left: 300px;
z-index: 999;
}
.pre{
position: absolute;
bottom: 0px;
left: 15px;
z-index: 999;
}



<!-- style slide -->
#browser {
    background: #000 -moz-linear-gradient(top, #0e0e0e, #313131);
    background: #000 -webkit-gradient(linear, left top, left bottom, from(#0e0e0e), to(#313131));
    position: relative;
    width: 320px;
    height: 495px;
    overflow-x: hidden;
    overflow-y: auto;
}

#page-container {

}

.page {
    position: absolute;
    width: 320px;
    height: 495px;
}

.back-page {
    position: absolute;
    width: 100%;
    height: 100%;
}

    /*----------------------------nav bar*/
nav.primary > ul {
    text-align: center;
}

nav.primary > ul li {
    list-style: none;
    display: inline;
    padding: 5px;
    border: 1px solid #fff;
}

nav.primary > ul li a {
    color: #CCC;
}

    /*----------------------------pages*/

#home-page {
    
}

#products-page {
    
}

#about-page {
    background-color: #006400;
}

#contact-page {
    background-color: #ff1493;
    width: 100%;
    height: 100%;
}

    /*----------------------------utils */

.stage-center {
    top: 0;
    left: 0;
    /*opacity: 100;*/
}

.none {
    display: none
}

.hide {
    opacity: 0;
}

.show {
    opacity: 100;
}

.transition {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}

    /*----------------------------flip transition */
#back,
#front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transition-duration: .5s;
    -webkit-transform-style: preserve-3d;
    z-index: 2;
}

#back {
   z-index: 3;
}

.normal {
    -webkit-transform: rotateY(0deg);
}

.flipped {
    -webkit-user-select: element;
    -webkit-transform: rotateY(180deg);
}

    /*----------------------------device specific styles*/

    /* iOS/android phone landscape screen width*/
@media screen and (max-device-width: 480px) and (orientation:landscape) {
    .stage-left {
        left: -480px;
    }

    .stage-right {
        left: 480px;
    }

    .page {
        width: 480px;
    }

}

    /* iOS/android phone portrait screen width*/
@media screen and (max-device-width: 320px) and (orientation:portrait) {
    .stage-left {
        left: -320px;
    }

    .stage-right {
        left: 320px;
    }

    .page {
        width: 320px;
    }
}

    /*catch all for at or larger than handheld landscape device widths*/
@media screen and (min-device-width: 481px) {
    .stage-left {
        left: -1024px;
    }

    .stage-right {
        left: 1024px;
    }

    .page {

    }
}

.status {
    background-color: #777;
    border: 1px solid #111;
    margin: 0 auto;
    padding:  5px;
    overflow: auto;
    width: 100%
}

.status .android {
    float:right;
    padding: 0 10px 0 0;
}

.status .fork-me {
    float:left;
}
